<template>
  <div class="home">
    <hry-header></hry-header>
    <div class="home-wrapper">
      <md-scroll-view ref="scrollView" :scrolling-x="false" :auto-reflow="true">
        <!--轮播图-->
        <hry-section :isShowTitle="false">
          <div slot="body" class="hry-banner">
            <md-swiper
              ref="swiper"
              :is-prevent="false"
              :useNative-driver="false"
            >
              <md-swiper-item
                :key="$index"
                v-for="(item, $index) in bannerList"
              >
                <img
                  @click="goDetailPage(item.url)"
                  :src="$api.imgProjectUrl + item.litpic"
                  :onerror="errorBannerImg"
                />
              </md-swiper-item>
            </md-swiper>
          </div>
        </hry-section>
        <!--热门项目-->
        <hry-section title="热门项目">
          <div slot="body" class="hry-project">
            <swiper
              v-if="dataList.length > 0"
              :options="swiperProjectOption"
              ref="mySwiper"
            >
              <!-- slides -->
              <swiper-slide :key="$index" v-for="(item, $index) in dataList"
                ><img
                  @click="showViewer($index, $event)"
                  :src="$api.imgProjectUrl + item.picture"
                  alt=""
                  :onerror="errorImg"
              /></swiper-slide>
            </swiper>
          </div>
        </hry-section>
        <!--新闻中心-->
        <hry-section title="新闻中心" needCenterWrapper>
          <div slot="body" class="hry-new" v-if="cateList.length > 0">
            <div>
              <div
                class="newContent"
                @click="$commonJs.goPage('newsDetail', cateList[0].id)"
              >
                <img
                  :src="$api.imgProjectUrl + cateList[0].coverpic"
                  alt=""
                  :onerror="errorNewImg"
                />
                <h2>
                  <span>{{ str(htmlEncode(cateList[0].title), 45) }}</span>
                  <a-icon type="double-right" class="icon" />
                </h2>
              </div>
            </div>
            <div>
              <div
                class="newContent"
                @click="$commonJs.goPage('newsDetail', cateList[1].id)"
              >
                <img
                  :src="$api.imgProjectUrl + cateList[1].coverpic"
                  alt=""
                  :onerror="errorNewsImg"
                />
                <h2>
                  <span>{{ str(htmlEncode(cateList[1].title), 45) }}</span>
                  <a-icon type="double-right" class="icon" />
                </h2>
              </div>
              <div class="newContent" @click="validateInfo(cateList[2].id)">
                <img
                  :src="$api.imgProjectUrl + cateList[2].coverpic"
                  alt=""
                  :onerror="errorNewsImg"
                />
                <h2>
                  <span>{{ str(htmlEncode(cateList[2].title), 45) }}</span>
                  <a-icon type="double-right" class="icon" />
                </h2>
              </div>
            </div>
          </div>
        </hry-section>
        <!--安全保障-->
        <hry-section title="安全保障">
          <div slot="body" class="hry-safe content-wrapper">
            <div>
              <img src="@/assets/img/invest.png" alt="" /> <br />
              <span>投资安全</span>
            </div>
            <div>
              <img src="@/assets/img/info.png" alt="" /> <br />
              <span>信息安全</span>
            </div>
            <div>
              <img src="@/assets/img/capital.png" alt="" /> <br />
              <span>资金安全</span>
            </div>
            <div>
              <img src="@/assets/img/check.png" alt="" /> <br />
              <span>尽调审计</span>
            </div>
          </div>
        </hry-section>
      </md-scroll-view>
    </div>
    <md-image-viewer
      v-model="isViewerShow"
      :list="imgs"
      :has-dots="true"
      :initial-index="viewerIndex"
    >
    </md-image-viewer>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { ScrollView, Swiper, SwiperItem, ImageViewer } from "mand-mobile";
// import { Modal } from "ant-design-vue";
import { str } from "@/tool/lib";

export default {
  name: "index",
  components: {
    hryHeader: () => import("@/components/header/mobileIndex"),
    hrySection: () => import("@/components/section/index"),
    swiper,
    swiperSlide,
    [ImageViewer.name]: ImageViewer,
    [ScrollView.name]: ScrollView,
    [Swiper.name]: Swiper,
    [SwiperItem.name]: SwiperItem
  },
  data() {
    return {
      swiperProjectOption: {
        direction: "horizontal", //滑动方向
        initialSlide: 0,
        loop: true, // 循环模式选项
        slideToClickedSlide: true,
        spaceBetween: 0,
        observer: true,
        speed: 400,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        slidesPerView: 4,
        centeredSlides: true
      },
      bannerList: [],
      cateList: [],
      dataList: [],
      isViewerShow: false,
      viewerIndex: 0,
      imgs: [],
      errorBannerImg:
        'this.src="' + require("@/assets/img/tuliebanner.png") + '"',
      errorImg: 'this.src="' + require("@/assets/img/tuliec.png") + '"',
      errorNewImg: 'this.src="' + require("@/assets/img/tulienew.png") + '"',
      errorNewsImg: 'this.src="' + require("@/assets/img/tulienews.png") + '"'
    };
  },
  mounted() {
    this.getHome();
  },
  methods: {
    str,
    htmlEncode(text) {
      if (text) {
        var arrEntities = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
        return text.replace(/&(lt|gt|nbsp|amp|quot);/gi, function(all, t) {
          return arrEntities[t];
        });
      } else {
        return "";
      }
    },
    getHome() {
      this.$ajax
        .get(this.$api.getHome)
        .then(res => {
          this.bannerList = res.data.banner_list;
          this.cateList = res.data.cate_list.list;
          this.dataList = res.data.data_list;
          this.dataList.forEach(item => {
            let img = this.$api.imgProjectUrl + item.picture;
            this.imgs.push(img);
          });
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    validateInfo(id) {
      this.$commonJs.goPage("newsDetail", id);
      // let that = this;
      // if (this.isLogin) {
      //   if (this.isValidate) {
      //     this.$commonJs.goPage("newsDetail", id);
      //   } else {
      //     Modal.confirm({
      //       title: "尊敬的用户：",
      //       content:
      //         "您暂无权限查看此页面，请立即前往个人中心，完善身份信息后方可查看！",
      //       okText: "去认证",
      //       cancelText: "取消",
      //       onOk() {
      //         that.$router.push({ name: "personAuthentication" });
      //       }
      //     });
      //   }
      // } else {
      //   Modal.confirm({
      //     title: "亲爱的游客：",
      //     content: "您尚未进行登录，请您前往登录",
      //     okText: "去登录",
      //     cancelText: "回首页",
      //     onOk() {
      //       that.$router.push({ name: "login" });
      //     },
      //     onCancel() {
      //       that.$router.push({ name: "home" });
      //     }
      //   });
      // }
    },
    goDetailPage(url) {
      if (
        url.indexOf("Project/detail/id/") !== -1 ||
        url.indexOf("project/detail/id/") !== -1
      ) {
        let arr = url.split("/");
        this.$router.push({
          name: "projectDetail",
          params: {
            id: arr[arr.length - 1]
          }
        });
      } else if (url.indexOf("www.hrycf.com") === -1) {
        window.location.href = url;
      }
    },
    showViewer(index) {
      this.viewerIndex = index;
      this.isViewerShow = true;
    },
    goPage(routerName) {
      this.$store.dispatch("changeCurrentRouter", routerName);
      this.$store.dispatch("changeActiveMenu", routerName);
      this.$router.push({ name: routerName });
    }
  },
  computed: {
    isValidate() {
      return this.$store.state.isValidate;
    },
    isLogin() {
      return this.$store.state.isLogin;
    }
  }
};
</script>

<style scoped lang="less">
.home {
  height: 100%;
  .flex_content();
  .flex_column();
}
.home-wrapper {
  flex: auto;
  overflow: hidden;
  height: 100%;
}
.hry-banner {
  img {
    width: 100%;
  }
}
.hry-project {
  .swiper-container {
  }
  .swiper-wrapper {
    .flex_content ();
  }
  .swiper-slide {
    text-align: center;
    overflow: hidden;
    align-self: center;
    transform: scale(0.9, 0.9);
    img {
      width: 100%;
    }
  }
  .swiper-slide-active {
    transform: scaleY(1);
    margin: 0 10px;
    img {
      transform: scaleY(1);
    }
  }
}
.hry-new {
  .flex_content ();
  font-size: 0;
  > div {
    .flex_one();
    &:first-child {
      margin-right: 6px;
    }
    &:nth-child(2) {
      .flex_content ();
      .flex_column();
      .newContent {
        .flex_one();
        height: 100%;
        &:first-child {
          margin-bottom: 7px;
        }
      }
    }
    .newContent {
      width: 100%;
      position: relative;
      img {
        width: 100%;
      }
      h2 {
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;
        padding: 14px 18px;
        background: rgba(0, 0, 0, 0.6);
        width: 100%;
        font-size: 20px;
        .flex_content ();
        .flex_justify_space();
        line-height: 30px;
        .icon {
          align-items: end;
        }
      }
    }
  }
}
.hry-safe {
  .flex_content ();
  text-align: center;
  margin-bottom: 63px;
  > div {
    flex: 1;
    img {
      width: 70px;
    }
    span {
      font-size: 20px;
      color: #5b5555;
    }
  }
}
</style>
